<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>进度条</title>
        <style>
            .wrapper{
                background-color: #c9c9c9;
                width: 500px;
                height: 30px;
                position: relative;
                margin: 50px auto;
                border-radius:15px ;
            }
            .progress{
                width: 0%;
                height: 30px;
                background-color: #1E9FFF;
                border-radius: 15px;
                position: relative;
                animation: myfirst 10s;
            }
            .progress span{
                line-height: 30px;
                height: 30px;
                float: right;
                color: #ffffff;
            }

            @keyframes myfirst {
                from{width: 0%;}
                to{width: 100%;}
            }

        </style>
    </head>

    <body>
        <div class="wrapper">
            <div class="progress">
                <span>50%</span>
            </div>
        </div>
    </body>

</html>